import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Form, Input, Select } from 'antd';
import React, { useEffect } from 'react';
import styles from './../index.css';

interface OrgDetailCardProps {
  detail: any;
  isEditing: boolean;
  editForm: any;
  onEdit: () => void;
  onSave: () => void;
  onCancel: () => void;
  onDelete: () => void;
  loading: boolean;
  translate: (prefix: string, key: string) => string;
  prefix: string;
  orgTreeData: any[];
}

const OrgDetailCard: React.FC<OrgDetailCardProps> = ({
  detail,
  isEditing,
  editForm,
  onEdit,
  onSave,
  onCancel,
  onDelete,
  loading,
  translate,
  prefix,
  orgTreeData,
}) => {
  // 从树形数据中提取所有机构选项
  const extractOrgOptions = (nodes: any[]): any[] => {
    let options: any[] = [];
    nodes.forEach((node) => {
      options.push({
        departmentId: node.departmentId,
        departmentName: node.departmentName,
      });
      if (node.children && node.children.length > 0) {
        options = options.concat(extractOrgOptions(node.children));
      }
    });
    return options;
  };

  const orgList = extractOrgOptions(orgTreeData);
  const parentOrgOptions = orgList
    .filter((opt) => opt.departmentId !== detail.departmentId)
    .map((opt) => ({
      label: `${opt.departmentId}-${opt.departmentName}`,
      value: opt.departmentId,
    }));

  // 根据 parentId 查找上级机构名称
  const findParentOrgName = (parentId: string) => {
    const parentOrg = orgList.find((org) => org.departmentId === parentId);
    return parentOrg ? `${parentOrg.departmentId}-${parentOrg.departmentName}` : parentId;
  };

  // 监听 detail 变化，同步更新表单数据
  useEffect(() => {
    if (detail && Object.keys(detail).length > 0) {
      editForm.setFieldsValue(detail);
    }
  }, [detail, editForm]);

  return (
    <div className={styles.orgDetailWrapper}>
      <Form form={editForm} initialValues={detail}>
        <div className={styles.orgDetailContent}>
          <div className={styles.orgDetailField}>
            <span className={styles.orgDetailLabel}>{translate(prefix, 'departmentId')}：</span>
            <span className={styles.orgDetailValue}>{detail.departmentId}</span>
          </div>
          <div className={styles.orgDetailField}>
            <span className={styles.orgDetailLabel}>{translate(prefix, 'departmentName')}：</span>
            {isEditing ? (
              <Form.Item name="departmentName" noStyle>
                <Input className={styles.orgDetailInput} />
              </Form.Item>
            ) : (
              <span className={styles.orgDetailValue}>{detail.departmentName}</span>
            )}
          </div>
          {detail.parentId && (
            <div className={styles.orgDetailField}>
              <span className={styles.orgDetailLabel}>{translate(prefix, 'parentOrgId')}：</span>
              {isEditing ? (
                <Form.Item name="parentId" noStyle>
                  <Select className={styles.orgDetailSelect} options={parentOrgOptions} />
                </Form.Item>
              ) : (
                <span className={styles.orgDetailValue}>{findParentOrgName(detail.parentId)}</span>
              )}
            </div>
          )}
        </div>

        <div className={styles.orgDetailActions}>
          {isEditing ? (
            <>
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={onSave}
                loading={loading}
                className={styles.orgDetailActionBtn}
              >
                {translate(prefix, 'save')}
              </Button>
              <Button danger onClick={onCancel}>
                {translate(prefix, 'cancel')}
              </Button>
            </>
          ) : (
            <>
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={onEdit}
                loading={loading}
                className={styles.orgDetailActionBtn}
              >
                {translate(prefix, 'edit')}
              </Button>
              <Button type="primary" danger icon={<DeleteOutlined />} onClick={onDelete} loading={loading}>
                {translate(prefix, 'delete')}
              </Button>
            </>
          )}
        </div>
      </Form>
    </div>
  );
};

export default OrgDetailCard;
